<template>
	<view v-if="XCXIsSelect!='否'">
		<view class="text-center text-red padding-top" v-if="form.remek&&form.status==2">拒绝原因：{{form.remek}}</view>

		<view class="">

			<view class=" padding">
				<view class=" padding bg radius">
					<u-form :model="form" ref="uForm" label-position="top" :label-style='lableStyle'>
						<u-form-item label="真实姓名" :border-bottom='true'>
							<u-input placeholder="请输入真实姓名" v-model="form.name" />
						</u-form-item>
						<u-form-item label="证件号码" :border-bottom='true'>
							<u-input placeholder="请输入身份证号码" v-model="form.idNumber" />
						</u-form-item>
						<u-form-item label="联系方式" :border-bottom='true'>
							<u-input placeholder="请输入联系方式" v-model="form.phone" maxlength="11" />
						</u-form-item>
						<u-form-item label="年龄" :border-bottom='true'>
							<u-input placeholder="请输入年龄" v-model="form.age" />
						</u-form-item>
						<u-form-item label="地址" :border-bottom='true'>
							<view @click="bindOpen()">
								<view v-if="!form.address" style="color: #999999;">请选择地址</view>
								<view>{{form.address}}</view>
							</view>
							<!-- <u-input placeholder="请选择地址" v-model="form.address" :disabled="true" @click="bindOpen()"/> -->
						</u-form-item>
					</u-form>
				</view>


				<view class=" padding bg radius margin-top">
					<view>
						<view class="text-lg margin-top-sm text-black">师傅头像</view>
						<view class="flex" style="overflow: hidden;flex-wrap: wrap;">
							<view v-if="form.avatar">
								<view class="margin-top flex margin-right-sm flex-wrap">
									<view class="flex"
										style="width: 200rpx;height: 200rpx;margin-right: 2rpx;position: relative;">
										<image :src="form.avatar" style="width: 100%;height: 100%;"></image>
										<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
											@click="removeImg()">
											<u-icon name="close-circle-fill" color="#2979ff" size="50rpx"></u-icon>
										</view>

									</view>
								</view>
							</view>
							<view class="margin-top" @click="addImages(4)" v-else>
								<view style="width: 200rpx;height: 200rpx;background: #f4f5f6;"
									class="flex justify-center align-center">
									<view>
										<view class="text-center">
											<image src="../static/addimg.png" style="width: 65rpx;height: 55rpx;">
											</image>
										</view>
										<view class="text-center text-black">添加图片</view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="text-lg margin-top">上传身份证正面</view>
					<view class="margin-top"
						style="border: 2rpx dashed #484B74; width: 100%;height: 320rpx;position: relative;">
						<view style="text-align: center;margin: 80rpx auto 0;" @click="addImages(1)" v-if="!form.front">
							<image src="../static/photo.png" mode="widthFix" style="width: 73rpx;"></image>
							<view class="text-sm  margin-top-sm">添加身份证正面</view>
						</view>
						<image @click="disabled? '':addImages(1)" v-else :src="form.front"
							style="width: 100%;height: 320rpx;"></image>
					</view>

					<view class="text-lg margin-top">上传身份证反面</view>
					<view class="margin-top"
						style="border: 2rpx dashed #484B74; width: 100%;height: 320rpx;position: relative;">
						<view style="text-align: center;margin: 80rpx auto 0;" @click="addImages(2)" v-if="!form.back">
							<image src="../static/photo.png" mode="widthFix" style="width: 73rpx;"></image>
							<view class="text-sm margin-top-sm">添加身份证反面</view>
						</view>
						<image @click="disabled? '':addImages(2)" v-else :src="form.back"
							style="width: 100%;height: 320rpx;"></image>
					</view>
				</view>
				<view class=" padding bg radius margin-top">
					<view class="text-lg">师傅标签</view>
					<view class="margin-top-sm ">
						<view class="qb margin-right-sm margin-bottom-xs" v-for="(item,index) in labelist" :key="index">
							<text>{{item}} </text>
							<text style="margin-left: 12rpx;" @click="detelist(index)">x</text>
						</view>
						<view class="qb margin-bottom-xs" @click="show = true">+添加</view>
					</view>

					<view class="text-lg margin-top">自我介绍</view>
					<view class="margin-top-sm padding-sm" style="background: #F5F5F5;">
						<u-input v-model="form.details" type="textarea" height="200" placeholder="请输入自我介绍"
							:clearable="false" maxlength="200" />
					</view>

				</view>
				<u-button @click="submit" class="margin-top" :custom-style="customStyle" shape="circle"
					:hair-line="false" v-if="geRen!=2">提交认证
				</u-button>
			</view>

		</view>
		<!-- 时间筛选 -->
		<u-picker v-model="startShow" mode="time" :params="params" @confirm="getStarttime()"></u-picker>

		<u-picker v-model="endShow" mode="time" :params="paramss" @confirm="getEndtime()"></u-picker>

		<u-popup v-model="show" mode="center" border-radius="14" width="500rpx" :closeable="true">
			<view class="padding">
				<view class="text-lg text-bold text-center">师傅标签</view>

				<view class="margin-top" style="background: #F5F5F5;padding: 0 20rpx;">
					<u-input v-model="value" type="text" placeholder="请输入标签" />
				</view>

				<view class="labebtn" @click="bindLabe">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import configdata from '../../common/config.js';

	export default {
		data() {
			return {
				tab: [{
					id: 1,
					name: '个人认证'
				}, {
					id: 2,
					name: '企业认证'
				}],
				classify: 1,
				form: {
					name: '',
					idNumber: '',
					front: '',
					back: '',
					remek: '',
					address: '',
					phone: '',
					avatar: '',
					shopImg: '',
					shopName: '',
					addressImg: '',
					startTime: '',
					endTime: '',
					shopType: '',
					latitude: '',
					longitude: '',
					details: '',
					serviceNum: '',
					userId: '',
					label: '',
					city:''
				},


				// disabled: false,
				lableStyle: {
					color: '#000000',
					fontSize: '32upx'
				},
				customStyle: {
					backgroundColor: '#557EFD',
					color: '#000000',
					border: 0
				},
				customStyle1: {
					backgroundColor: '#ccc',
					color: '#000000',
					border: 0
				},
				renzheng: 0,
				Qe: 0,
				geRen: 0,
				startShow: false,
				endShow: false,
				params: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: false
				},
				paramss: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: false
				},
				addressImg: [],
				addressImgs: [],
				XCXIsSelect: '否',
				show: false,
				value: '',
				labelist: []
			}
		},
		onLoad(e) {
			console.log(e)
			// this.classify = e.classify
			this.XCXIsSelect = this.$queue.getData("XCXIsSelect");
			this.getUserInfo()
			if (this.XCXIsSelect != '否') {
				uni.setNavigationBarTitle({
					title: '师傅入驻'
				})
			} else {
				uni.setNavigationBarTitle({
					title: '用户协议'
				})
			}

		},
		onShow() {
			this.Qe = uni.getStorageSync("Qe")
			this.form.userId = uni.getStorageSync("userId")
			// this.geRen = uni.getStorageSync("geRen")
		},
		methods: {
			detelist(index) {
				this.labelist.splice(index, 1)
			},
			bindLabe() {
				if (!this.value) {
					uni.showToast({
						title: '请输入标签',
						icon: 'none'
					})
					return
				}
				this.labelist.push(this.value)
				this.show = false
				this.value = ''
			},
			bindTimeChange: function(e) {
				if (this.classify == 1) {
					this.form.startTime = e.target.value
				} else if (this.classify == 2) {
					this.forms.startTime = e.target.value
				}

			},
			bindTimeChanges: function(e) {
				if (this.classify == 1) {
					this.form.endTime = e.target.value
				} else if (this.classify == 2) {
					this.forms.endTime = e.target.value
				}
			},
			removeImg() {

				this.form.avatar = ''
				console.log(this.form.avatar, '111111')
			},
			getStarttime(e) {
				if (this.classify == 1) {
					this.form.startTime = e.hour + ':' + e.minute
				} else if (this.classify == 2) {
					this.forms.startTime = e.hour + ':' + e.minute
				}
			},
			getEndtime(e) {
				if (this.classify == 1) {
					this.form.endTime = e.hour + ':' + e.minute
				} else if (this.classify == 2) {
					this.forms.endTime = e.hour + ':' + e.minute
				}

			},
			// 店铺地址
			bindOpen(e) {
				console.log(e)
				let that = this
				uni.chooseLocation({
					success: function(res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						if (that.classify == 1) {
							that.form.address = res.address
							that.form.latitude = res.latitude
							that.form.longitude = res.longitude
							that.selectCity(res.longitude, res.latitude)
						} else if (that.classify == 2) {
							that.forms.address = res.address
							that.forms.latitude = res.latitude
							that.forms.longitude = res.longitude
						}
					}
				});
			},
			selectCity(longitude, latitude) {
				this.$Request.get('/app/Login/selectCity?lat=' + latitude + '&lng=' + longitude).then(res => {
					if (res.code == 0) {
						this.form.city = res.data.city 
					}
				});
			},
			cut(tab) {
				this.classify = tab.id
				this.getUserInfo()
			},
			submit() {
				this.form.label = this.labelist
				this.form.label = this.form.label.toString();
				if (!this.form.name) {
					uni.showToast({
						title: '请输入真实姓名',
						icon: 'none',
						duration: 1000
					})
					return;
				}

				if (!this.form.idNumber) {
					uni.showToast({
						title: '请输入身份证号',
						icon: 'none',
						duration: 1000
					})
					return;
				}
				let regX =
					/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
				if (!regX.test(this.form.idNumber)) {
					uni.showToast({
						title: '请输入正确的身份证号',
						icon: 'none',
						duration: 1000
					})
					return;
				}
				if (!this.form.phone) {
					uni.showToast({
						title: '请输入联系方式',
						icon: 'none',
						duration: 1000
					})
					return;
				}
				if (this.form.phone.length != 11) {
					uni.showToast({
						title: '请输入正确联系方式',
						icon: 'none',
						duration: 1000
					})
					return;
				}
				if (!this.form.age) {
					uni.showToast({
						title: '请输入年龄',
						icon: 'none',
						duration: 1000
					})
					return;
				}
				if (!this.form.address) {
					uni.showToast({
						title: '请选择地址',
						icon: 'none',
						duration: 1000
					})
					return;
				}
				// let regX =
				// 	/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
				// if (!regX.test(this.form.idNumber)) {
				// 	uni.showToast({
				// 		title: '请输入正确的身份证号',
				// 		icon: 'none',
				// 		duration: 1000
				// 	})
				// 	return;
				// }
				if (!this.form.avatar) {
					uni.showToast({
						title: '请上传师傅头像',
						icon: 'none',
						duration: 1000
					})
					return;
				}
				if (!this.form.front) {
					uni.showToast({
						title: '请上传身份证正面',
						icon: 'none',
						duration: 1000
					})
					return;
				}
				if (!this.form.back) {
					uni.showToast({
						title: '请上传身份证反面',
						icon: 'none',
						duration: 1000
					})
					return;
				}
				if (!this.form.label) {
					uni.showToast({
						title: '请输入标签',
						icon: 'none',
						duration: 1000
					})
					return;
				}
				if (!this.form.details) {
					uni.showToast({
						title: '请输入自我介绍',
						icon: 'none',
						duration: 1000
					})
					return;
				}

				let data = {
					name: this.form.name,
					city: this.form.city,
					idNumber: this.form.idNumber,
					front: this.form.front,
					back: this.form.back,
					remek: this.form.remek,
					classify: this.classify,
					address: this.form.address,
					phone: this.form.phone,
					shopImg: this.form.shopImg,
					shopName: this.form.shopName,
					addressImg: this.form.addressImg,
					startTime: this.form.startTime,
					endTime: this.form.endTime,
					shopType: this.form.shopType,
					latitude: this.form.latitude,
					longitude: this.form.longitude,
					details: this.form.details,
					userId: this.form.userId,
					age: this.form.age,
					avatar: this.form.avatar,
					label: this.form.label,

				}



				this.$Request.postJson("/app/userCertification/inserts", data).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '认证提交成功！',
							icon: 'none'
						})
						setTimeout(function() {
							uni.navigateBack()
						}, 1000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
			},
			getUserInfo() {
				this.$Request.get("/app/userCertification/queryInsert?classify=" + this.classify).then(res => {
					console.log(res)
					if (res.code == 0 && res.data) {
						// if (res.data.classify) {
						// 	this.classify = res.data.classify
						// 	uni.setStorageSync("classify", res.data.classify)
						// }
						// this.form = res.data
						this.form.name = res.data.name
						this.form.city = res.data.city
						this.form.idNumber = res.data.idNumber
						this.form.front = res.data.front
						this.form.back = res.data.back
						this.form.status = res.data.status
						this.form.age = res.data.age
						this.form.phone = res.data.phone
						this.form.serviceNum = res.data.serviceNum
						this.form.label = res.data.label
						this.form.score = res.data.score

						this.form.avatar = res.data.avatar
						this.form.address = res.data.address
						if (res.data.label) {
							this.labelist = res.data.label.split(',')
						}
						this.form.details = res.data.details
						if (res.data.status == 1) {
							this.disabled = true
						}
						if (res.data.status == 2 && res.data.remek) {
							this.form.remek = res.data.remek
						}

					}
				});
			},
			addImages(e) {
				let that = this
				uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera'],
					success: res => {
						for (let i = 0; i < 1; i++) {
							that.$queue.showLoading("上传中...");
							uni.uploadFile({ // 上传接口
								// url: this.config("APIHOST1") + '/alioss/upload', //真实的接口地址https://xxpwadmin.xianmxkj.com/sqx_fast/alioss/upload
								url: 'https://jiazhengsfv5.xianmaxiong.com/sqx_fast/alioss/upload',
								filePath: res.tempFilePaths[i],
								name: 'file',
								success: (uploadFileRes) => {
									if (e == 1) {
										that.form.front = JSON.parse(uploadFileRes.data).data
									} else if (e == 3) {
										that.forms.front = JSON.parse(uploadFileRes.data).data
									} else if (e == 2) {
										that.form.back = JSON.parse(uploadFileRes.data).data
									} else if (e == 4) {
										that.form.avatar = JSON.parse(uploadFileRes.data).data
									}

									uni.hideLoading();
								}
							});
						}
					}
				})
			},
			// 图片上传
			addImage() {
				let that = this
				uni.chooseImage({
					count: 6,
					sourceType: ['album', 'camera'],
					success: res => {
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							that.$queue.showLoading("上传中...");
							uni.uploadFile({ // 上传接口
								// url: that.config("APIHOST1") + '/alioss/upload', //真实的接口地址
								url: 'https://jiazhengsfv5.xianmaxiong.com/sqx_fast/alioss/upload',
								filePath: res.tempFilePaths[i],
								name: 'file',
								success: (uploadFileRes) => {
									uni.hideLoading();
									// if (that.addressImg.length < 6) {
									if (that.classify == 1) {
										that.addressImg.push(JSON.parse(uploadFileRes.data)
											.data)
									}
									// } else if (that.addressImgs.length < 6) {
									else if (that.classify == 2) {
										that.addressImgs.push(JSON.parse(uploadFileRes.data)
											.data)
										console.log(that.addressImgs, '---------00')
									}
									// }
								}
							});
						}
					}
				})
			},
			config: function(name) {
				var info = null;
				if (name) {
					var name2 = name.split("."); //字符分割
					if (name2.length > 1) {
						info = configdata[name2[0]][name2[1]] || null;
					} else {
						info = configdata[name] || null;
					}
					if (info == null) {
						let web_config = cache.get("web_config");
						if (web_config) {
							if (name2.length > 1) {
								info = web_config[name2[0]][name2[1]] || null;
							} else {
								info = web_config[name] || null;
							}
						}
					}
				}
				return info;
			},
		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
	}

	.bg {
		background-color: #FFFFFF;
	}

	.u-size-default {
		background: #557EFD !important;
		color: #FFFFFF !important;
	}

	.u-input__input {
		color: balck !important;
	}

	.title_btn {
		height: 78upx;
		line-height: 78upx;
		/* background: #f7f7f7; */
	}

	.bgCol2 {
		color: #557EFD;
		background: #F2F5FF;
	}

	.qb {
		border: 1rpx solid #557EFD;
		color: #557EFD;
		display: inline-flex;
		border-radius: 50rpx;
		padding: 4rpx 20rpx;


	}

	.labebtn {
		background-color: #557EFD;
		color: #FFFFFF;
		border-radius: 24rpx;
		margin-top: 30rpx;
		text-align: center;
		padding: 20rpx 0;
	}
</style>